<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../src/three.js"></script>
    <script src="../src/OrbitControls.js"></script>
    <script src="../src/libs/EffectComposer.js"></script>
    <script src="../src/libs/RenderPass.js"></script>
    <script src="../src/libs/ShaderPass.js"></script>
    <script src="../src/libs/CopyShader.js"></script>

    <script src="../src/libs/OutlinePass.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
<script>
/**
     * 创建场景对象
     */
     var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    var sphere = new THREE.SphereGeometry(30, 25, 25); //创建一个立方体几何对象

    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff,
    }); //材质对象
    var material2 = new THREE.MeshLambertMaterial({
      color: 0xffff00,
    }); //材质对象
    var material3 = new THREE.MeshLambertMaterial({
      color: 0x00ff00,
    }); //材质对象

    var mesh = new THREE.Mesh(sphere, material); //网格模型对象
    scene.add(mesh); //网格模型添加到场景中

    var mesh2 = new THREE.Mesh(sphere, material2)
    mesh2.position.set(70,0,0)
    scene.add(mesh2)

    var mesh3 = new THREE.Mesh(sphere, material3)
    mesh3.position.set(-70,0,0)
    scene.add(mesh3)

    var cube = new THREE.Mesh(new THREE.BoxGeometry(20,20,20),material)
    cube.position.set(0,70,0)
    scene.add(cube)

    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 40; //三维场景缩放系数
    //创建相机对象
    // var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    var camera = new THREE.PerspectiveCamera(70, k, 0.01, 1000)
    camera.position.set(0, 0, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    // 创建一个渲染器通道，场景和相机作为参数
    var renderPass = new THREE.RenderPass(scene, camera);
    // 创建OutlinePass通道,显示外轮廓边框
    var OutlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
    // 后处理完成，设置renderToScreen为true，后处理结果在Canvas画布上显示
    OutlinePass.renderToScreen = true;

    //设置要显示边框的网格模型
    //交互的时候可以设置一个鼠标事件，点击选中了某个模型，就直接把某个网格模型作为值的元素
    // OutlinePass.selectedObjects = [mesh];
    OutlinePass.selectedObjects = []

    //OutlinePass相关属性设置
    OutlinePass.visibleEdgeColor = new THREE.Color(1, 0, 0);    // 可视部分轮廓线
    // OutlinePass.hiddenEdgeColor = new THREE.Color(0, 1, 0);  // 遮挡部分轮廓线
    OutlinePass.hiddenEdgeColor = new THREE.Color(0,0,0)        // 遮挡轮廓线透明
    OutlinePass.edgeGlow = 0.0;                                 // 轮廓线收缩扩大动效(轮廓线跳动幅度) 
    OutlinePass.usePatternTexture = false;                      // 选中网格内容是否使用纹理进行填充
    OutlinePass.edgeThickness = 1.0;
    OutlinePass.edgeStrength = 3.0;
    OutlinePass.downSampleRatio = 2;
    OutlinePass.pulsePeriod = 0;                                // 轮廓线收缩扩大动效(轮廓线跳动频率)        

    // 创建后处理对象EffectComposer，WebGL渲染器作为参数
    var composer = new THREE.EffectComposer(renderer);
    // 设置renderPass通道
    composer.addPass(renderPass);
    // 设置OutlinePass通道
    composer.addPass(OutlinePass);

    function render() {
      // 使用后处理模块EffectComposer，可通过该对象的render方法调用渲染器的render方法
      composer.render();
    //   controls.update();
      requestAnimationFrame(render);
    }
    render();
    var controls = new THREE.OrbitControls(camera); //创建控件对象

    document.onmousedown = function(event){
        var mouse = {}
        mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
        raycaster.setFromCamera( mouse, camera );
        // var intersects = raycaster.intersectObject( mesh );
        var sub_meshs = scene.children.filter(val => val.type == "Mesh")
        // var intersects = raycaster.intersectObject( scene )
        var intersects = raycaster.intersectObjects( sub_meshs )
        if ( intersects.length > 0 ) {
            OutlinePass.selectedObjects = [intersects[0].object]
        }else{
            OutlinePass.selectedObjects = []
        }
    }

    var raycaster = new THREE.Raycaster()

</script>
</html>